<template>
  <div>
    <h1 class="text-[1.5rem] font-bold mb-4">图层</h1>
    <a-card :body-style="{ padding: '1rem' }">
      <ul class="flex gap-2 flex-col" v-if="currentTheme.image.length > 0">
        <li
          v-for="item in currentTheme.image"
          class="py-2 px-4 cursor-pointer flex justify-between items-center"
          @click="setCurrentComponent(item)"
          :class="{ active: currentComponent.id === item.id }"
        >
          <span>{{ item.name }}</span>
          <div class="flex actions">
            <a-button size="small" type="ghost" @click="deleteComponent">
              <CloseOutlined />
            </a-button>
          </div>
        </li>
      </ul>
      <a-empty v-else />
    </a-card>
  </div>
</template>

<script setup lang="ts">
import type { ThemeCanvas } from '@/types/theme';
import { currentTheme, currentComponent } from '../data/data';
import { deleteComponent } from '../data/canvas.actions';
import { CloseOutlined } from '@ant-design/icons-vue';

const setCurrentComponent = (item: ThemeCanvas) => {
  currentComponent.value = item;
};
</script>

<style lang="scss" scoped>
li {
  border-radius: var(--radius);
  border: 1px solid transparent;
  border-bottom: 1px solid var(--border-color);

  &:hover {
    background-color: var(--hover-background);
    .actions {
      opacity: 1;
    }
  }
  .actions {
    opacity: 0;
  }
}
li.active {
  border: 1px solid var(--primary);
}
</style>
